<template>
	<view>
		<an-nav-bar title="特惠专区"> </an-nav-bar>
		<view class="project-list">
			<view class="item flex" v-for="(item,index) in projectList" :key="index" @click="gotoUrl(item)">
				<view class="photo">
					<image class="img" :src="$common.binImage(item.projectImg)" mode="">
					</image>
				</view>
				<view class="info">
					<view class="row flex">
						<view class="name">{{item.projectName}}</view>
						<!-- <view class="star flex">
							<i v-for="(item,index) in 5" :key="index"></i>
						</view> -->
					</view>
					<view class="row flex">
						<view class="time">服务时长：{{item.serviceTime}}分钟</view>
					</view>
					<view class="row flex">
						<view class="price flex">
							<span class="span1">{{item.sellPrice}}</span>
							<span class="span2">元/次</span>
						</view>
						<view class="order">已售{{item.sellNum}}份</view>
					</view>
					<view class="row flex">
						<view class="store flex">
							{{item.storeName}}
						</view>
					</view>
					<view class="row" style="display: none;">
						<view style="height: 50rpx; line-height: 50rpx; color: #999; overflow: hidden;">
							{{item.projectDesc}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectList: [],
				form: {}
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$http.get('/appNoAuth/store/serviceProject/list', this.form).then(res => {
					this.projectList = res.rows
				})
			},
			gotoUrl(item) {
				uni.navigateTo({
					url: '/pages/projectDetails/projectDetails?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.project-list {
		width: 100%;
		background-color: #f8f8f8;

		.item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 10rpx;
			align-items: flex-start !important;

			.photo {
				width: 230rpx;
				height: 230rpx;
				margin-right: 30rpx;

				.img {
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
					box-shadow: 0 0 6rpx 0 hsla(0, 0%, 40%, .28);
				}
			}

			.info {
				width: 450rpx;
				height: 230rpx;

				.row {
					margin-bottom: 8rpx;

				}

				.name {
					max-width: 300rpx;
					overflow: hidden;
					font-size: 28rpx;
					color: #444;
					flex: 1;
					font-weight: 700;
				}

				.star {
					height: 30rpx;

					i {
						width: 28rpx;
						height: 30rpx;
						margin-left: 2rpx;
						background: url(/static/star.png) no-repeat 50%;
						background-size: 28rpx 26rpx;
					}
				}

				.time {
					color: #666;
					font-size: 24rpx;
				}

				.price {
					color: #e02020;
					font-size: 11px;
					flex: 1;

					.span1 {
						font-size: 34rpx;
						font-weight: 700;
					}

					.span2 {
						font-weight: 400;
						padding-left: 10rpx;
					}
				}

				.order {
					color: #666;
					font-size: 24rpx;
				}

				.store {
					font-size: 26rpx;
					color: #666;

					&::before {
						content: "";
						display: block;
						width: 26rpx;
						height: 24rpx;
						background: url(/static/shop-icon.png) no-repeat;
						background-size: 100% auto;
						margin-right: 6rpx;
					}
				}

				.body {
					margin-top: 6rpx;

					.part {
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						color: #666;
						font-size: 22rpx;
						margin-right: 10rpx;
						background-color: #f9f8f8;
						border-radius: 10rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
